
//整体颜色的切换
let isSun = false
let oSun = document.querySelector('.header_list>.active')
let oBx = document.querySelector('.box')
oSun.addEventListener('click', function () {
    isSun = !isSun
    console.log('asfasfsf');
    oSun.innerHTML = isSun ? '&#9790;' : '&#9737;'
    oBx.classList[isSun ? 'add' : 'remove']('active')
})

let olShow = false
let oList = document.querySelector('.header_list>.list')
let oLists = oList.querySelectorAll('ul>li')
//列表显示隐藏
oList.addEventListener('click', function (e) {
    // console.log(e)
    e.stopPropagation()
    olShow = !olShow

    oList.querySelector('ul').classList[olShow ? 'add' : 'remove']('show')
})
oList.querySelector('ul').addEventListener('click', function (e) {
    e.stopPropagation()
})
//列表项点击事件

oLists.forEach(function (item, index) {
    item.addEventListener('click', function (e) {
        e.stopPropagation()
        console.log(index)

        oLists.forEach(function (item, index) {
            item.classList.remove('active')
        })
        item.classList.add('active')
    })
})


//顶部轮播图
let oBanner = document.querySelector('.navigator .right>ul')
let oBtn_banner = document.querySelectorAll('.navigator .right>span')
let oBanner_li = oBanner.querySelectorAll('.navigator .right>ul>li')
let index = 0

for (let i = 0; i < oBtn_banner.length; i++) {
    oBtn_banner[i].onclick = function (e) {
        e.stopPropagation()
        i ? index++ : index--
        console.log(index);
        if (index >= 2) {
            index = 4
            oBanner.style.transform = `translateX(-${index * 12.5}%)`
            oBanner.style.transition = 'all 0.5s ease-in-out'
            setTimeout(() => {
                oBanner.ontransitionend = function () {
                    oBanner.style.transition = 'all 0s'
                    oBanner.style.transform = `translateX(0%)`
                    index = 0
                    oBanner.ontransitionend = null
                }
            });
        }
        else if (index < 0) {
            oBanner.style.transition = 'all 0s'
            oBanner.style.transform = `translateX(-${4 * 12.5}%)`
            setTimeout(() => {
                oBanner.style.transition = 'all 0.5s ease-in-out'
                oBanner.style.transform = `translateX(-${12.5}%)`
                index = 1
            });
        } else {
            console.log(i);
            oBanner.style.transform = `translateX(-${index * 12.5}%)`
            oBanner.style.transition = 'all 0.5s ease-in-out'
        }

    }
}
function move(index, outIndex) {
    oBanner.style.transition = 'all 0.5s ease-in-out'
    oBanner.style.transform = `translateX(-${index * 12.5}%)`
    console.log('111111111111');
    this.index = outIndex
}